<template>
    <div class="hello">
        <h1>{{ count}}</h1>
        <h1>{{ countMsg}}</h1>
        <h1>xx{{ computeCount}}</h1>
        <button @click.prevent="add">点击加1一</button>
        <button @click.prevent="addCount">点击加1二</button>
    </div>
</template>

<script>
    import {mapGetters, mapMutations, mapState} from "vuex"

    export default {
        name: "HelloWorld",
        data() {
            return {
                msg: "消息"
            }
        },
        methods: {
            add() {
                this.$store.commit("addCount")
            },
            ...mapMutations(["addCount"])
        },

        // 方式一
        // computed: mapState(['count']),
        computed: {
            ...mapState(["count"]),
            ...mapGetters(["computeCount"]),
            countMsg() {
                return this.$store.state.count + this.msg;
            }
        },
        // 方式二
        // computed: mapState({
        //     count: "count",
        //     countMsg(state) {
        //         return state.count + this.msg
        //     }
        // }),
        // 方式三
        // computed: {
        //     // 有其他的计算属性
        //     xx() {
        //         return "xxx" + this.msg
        //     },
        //     ...mapState({
        //         count: "count",
        //         countMsg(state) {
        //             return state.count + this.msg
        //         }
        //     })
        //
        // },
        mounted() {
            console.log(this);

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
